<template>
  <div class="side-pic">
    <div class="left-pic">
      <div class="top-pic" @click.stop="preview(0)">
        <img :src="imgs[0].url" alt="" />
      </div>
      <div class="bottom-pic">
        <div class="small-pic" @click.stop="preview(2)">
          <img :src="imgs[2].url" alt="" />
        </div>
        <div class="small-pic" @click.stop="preview(3)">
          <img :src="imgs[3].url" alt="" />
        </div>
        <div class="small-pic" @click.stop="preview(4)">
          <img :src="imgs[4].url" alt="" />
        </div>
        <div class="small-pic" @click.stop="preview(5)">
          <img :src="imgs[5].url" alt="" />
        </div>
      </div>
    </div>
    <div class="right-pic">
      <div class="large-pic" @click.stop="preview(1)">
        <img :src="imgs[1].url" alt="" />
      </div>
      <div class="small-pic" @click.stop="preview(6)">
        <img :src="imgs[6].url" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { preview } from '@/utils/preview'
export default {
  props: {
    imgs: Array
  },
  methods: {
    preview(index) {
      let imgs = []
      this.imgs.forEach((img) => {
        imgs.push(img.url)
      })
      preview(imgs, index)
    }
  }
}
</script>

<style lang="less" scoped>
.side-pic {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;

  .left-pic {
    width: 66%;

    .top-pic {
      margin-bottom: 2px;
      height: 118px;
    }
    .bottom-pic {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .small-pic {
        height: 118px;
        width: 50%;
        margin-bottom: 2px;

        &:nth-of-type(odd) {
          padding-right: 1px;
        }
        &:nth-of-type(even) {
          padding-left: 1px;
        }
      }
    }
  }
  .right-pic {
    width: 33%;
    display: flex;
    flex-wrap: wrap;

    .large-pic {
      height: 238px;
      width: 100%;
      margin-bottom: 2px;
    }

    .small-pic {
      height: 118px;
      width: 100%;
      margin-bottom: 2px;
    }
  }

  img {
    height: 100%;
    width: 100%;
  }
}
</style>
